<script setup>
import { ref, onMounted, computed } from 'vue'
import {getAdmin, updateAdmin} from '@/axios/admin/adminReq'
import { ElMessage } from 'element-plus'
import useUserStore from '@/stores/userStore'


const adminInfo = ref({
    id: 0,
    name: '管理员',
    gender:1,
    birthDate: '2000-01',
    idNumber:'123456789012345678',
    phone: '12345678901'
})

const gender = [
  {
    value: 1,
    label: '男',
  },
  {
    value: 0,
    label: '女',
  }
];

const rules = {
    name: [
        { required: true, message: '请输入用户姓名', trigger: 'blur' },
        {
            pattern: /^\S{2,10}$/,
            message: '姓名必须是2-10位的非空字符串',
            trigger: 'blur'
        }
    ],
    gender: [
        { required: true, message: '请选择性别', trigger: 'change' },
        {
            pattern: /^(1|0)$/,
            message: '请选择男或女',
            trigger: 'change'
        }
    ],
    birthDate: [
        { required: true, message: '请输入出生年月', trigger: 'blur' },
        {
            pattern: /^\d{4}-\d{2}$/,
            message: '出生年月格式为 YYYY-MM',
            trigger: 'blur'
        }
    ],
    idNumber: [
        { required: true, message: '请输入身份证号', trigger: 'blur' },
        {
            pattern: /^\d{18}$/,
            message: '身份证号必须是18位数字',
            trigger: 'blur'
        }
    ]
}
const formRef = ref(null)
const userStore = useUserStore();

const getUserInfo = async () => {
    const adminId = userStore.userId;
    //2.判断token是否存在
    // if(!token){
        //     //跳转到登录页面
        //     router.push('/login')
        //     return
        // }
        //3.获取用户信息
        const res = await getAdmin(adminId);
        //4.判断用户信息是否存在
        if(res){
        adminInfo.value = res;
    } else {
        ElMessage({
            type: 'error',
            message: '获取用户信息失败',
        });
    }
}

const submitForm = async () => {
    formRef.value.validate(async (valid) => {
        if (valid) {
            const res = await updateAdmin(adminInfo.value);
            if (res) {
                ElMessage({
                    type: 'success',
                    message: '更新用户信息成功',
                });
            } else {
                ElMessage({
                    type: 'error',
                    message: '更新用户信息失败',
                });
            }
        } else {
            ElMessage({
                type: 'error',
                message: '表单验证失败，请检查输入',
            });
            return false;
        }
    });
};

// 在组件挂载时获取用户信息
onMounted(() => {
    getUserInfo();
});
</script>
<template>
    <el-card class="page-container">
        <template #header>
            <div class="header">
                <span>基本资料</span>
            </div>
        </template>
        <el-row>
            <el-col :span="12">
                <el-form ref="formRef" :model="adminInfo" :rules="rules" label-width="100px" size="large">
                    <el-form-item label="姓名"prop="name">
                        <el-input v-model="adminInfo.name"></el-input>
                    </el-form-item>
                    <el-form-item label="性别" prop="gender">
                    <el-select v-model.number="adminInfo.gender" placeholder="请选择性别">
                        <el-option
                        v-for="item in gender"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                        ></el-option>
                    </el-select>
                    </el-form-item>
                    <el-form-item label="出生年月" prop="birthDate">
                        <el-input v-model="adminInfo.birthDate"></el-input>
                    </el-form-item>
                    <el-form-item label="身份证号" prop="idNumber">
                        <el-input v-model="adminInfo.idNumber"></el-input>
                    </el-form-item>
                    <el-form-item label="手机号" prop="phone">
                        <el-input v-model="adminInfo.phone" disabled></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="submitForm">提交修改</el-button>
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>
    </el-card>
</template>